import classNames from "classnames";
import React from "react";
import { modeTypes } from "../../../../../constants/form";
import { getDesign, getView, propsCfgToViewCfg } from "../../component";
import { isWrapper } from "../../component/typeof";
import FieldLock from './FieldLock';

export default class FormItem extends React.Component {
  onPropsChange = (...args) => {
    const { onPropsChange, field } = this.props;

    onPropsChange(...args, field.uuid);
  }
	
  render() {
    const { selected, field, renderItem, onRemove, components, dataId } = this.props;
    const fType = field.type.toLowerCase();
    const clsNameStr = classNames('wea-edc-form-item', { selected });
    const data = propsCfgToViewCfg(fType, field.config);

    if (isWrapper(field)) {
      const Component = getDesign(fType);

      if (!Component) return null;

      return (
        <div className={clsNameStr} data-id={dataId}>
          <Component ecId={`${this && this.props && this.props.ecId || ''}_Component@y970bb`}
            field={field}
            data={data}
            type={field.type}
            renderItem={renderItem}
            onRemove={onRemove}
            onPropsChange={this.onPropsChange}
          />
        </div>
      );
    }

    const ComponentView = getView(fType);

    if (!ComponentView) return ComponentView;

    return (
		<div className={clsNameStr} data-id={dataId}>
			<FieldLock ecId={`${this && this.props && this.props.ecId || ''}_FieldLock@sg6ico`} visible={1 == data.hidden} />
			<ComponentView ecId={`${this && this.props && this.props.ecId || ''}_ComponentView@5merq6`}
				data={data}
				type={field.type}
				modeType={modeTypes.DESIGN}
				value={data.defaultValue}
			/>
		</div>
    );
  }
}

FormItem.defaultProps = {
  field: {},
  selected: false,
  renderItem: () => null,
  onPropsChange: () => {},
  onRemove: () => { }
};